<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2" style="margin-top: 20px;">
        <el-row>
          <el-card style="height: 80px;">
            <el-col :span="3">
              <i class="el-icon-food" style="size: 50px;"></i>
              <span style="font-size: 20px;">菜品类别</span>
            </el-col>
            <el-col :span="20" justify="end" style="margin-bottom: 5px;">
              <el-button @click="getFoods()">全部</el-button>
              <el-button v-for="o in types" @click="getFoods(o.typeId)">{{o.typeName}}</el-button>
            </el-col>
          </el-card>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-row>
            <el-col :span="6" v-for="(o, index) in foods" :key="o">
              <el-card :body-style="{ padding: '0px' }" style="width: 220px; margin-top: 20px; margin-right: 10px;">

                <el-row>
                  <el-col :span="10">
                    <el-image style="width: 200px; height: 200px; padding-left: 10px; padding-top: 15px;"
                      :src="o.coverPhoto" :fit="fit"></el-image>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="20" :offset="1">
                    <span style="font-size:15px;">{{o.foodName}} </span>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10" :offset="1" style="margin-top: 10px;">
                    <span style="font-size:15px; color: #f08300;">{{o.price}}￥</span>
                  </el-col>
                  <el-col :span="10" :offset="3">
                    <el-button type="text" class="button" @click="addCart(o.id)">加入购物车</el-button>
                  </el-col>
                </el-row>

              </el-card>
            </el-col>
          </el-row>

        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "Recommand_food",
    data() {
      return {
        types: [],
        foods: []
      }
    },
    methods: {
      getFoods(typeId) {
        this.$http.get("/foodVariety/searchByType", {
          params: {
            typeId: typeId
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            console.log(resp.data.data.list)
            this.foods = resp.data.data.list;
          }
        })
      },
      getTypes() {
        this.$http.get("/storeInfo/categories")
          .then(resp => {
            if (resp.data.code == 200) {
              this.types = resp.data.data;
              console.log(this.types);
            }
          })
      },
      addCart(foodId) {
        if (localStorage.getItem('loginUser') == null) {
          this.$router.push('/login');
        } else {
          this.$http.post("/userCart/addCart", {
            foodId: foodId,
            count: 1,
          }).then(resp => {
            if (resp.data.code == 200) {
              console.log(resp)
              this.$message.success('添加成功');
            }
          })
        }

      },

    },

    created() {
      this.getTypes();
      this.getFoods();
    }
  }
</script>

<style>
</style>